<!-- 登录 -->
<template>
	<div>
		<text class="form-title">登录信息</text>
		<!-- <view class="app-img">
			<image src="/static/uni.png" mode=""></image>
		</view> -->
		<loginForm :formInline="formInline" :btnText="btnText" :formItem="formItem" @onSubmit="onSubmit">
			<view class="login-method">
				<text @click="changeLoginMethod">使用{{loginMethodText}}登录</text>
			</view>
		</loginForm>
		<view class="footer" v-show="hidshow">
			<span @click="toRegister">快速注册</span>|
			<span @click="">联系管理员</span>
		</view>
	</div>

</template>

<script>
	import loginForm from "../../components/current/vForm.vue";
	import baseUrl from '../../config.js';

	export default {
		components: {
			loginForm
		},
		data() {
			return {
				btnText: "登录",
				loginMethodText: "验证码",
				//表格参数
				formItem: [{
					type: 'input',
					label: "账号",
					placeholder: "请输入手机号码",
					focus: true,
					clumn: 'account'
				}, {
					type: 'input',
					inputType: 'password',
					label: "密码",
					placeholder: "请输入密码",
					clumn: 'password'
				}],
				//表单字段数据
				formInline: {
					account: "",
					password: "",
				},
				docmHeight: document.documentElement.clientHeight, //默认屏幕高度
				showHeight: document.documentElement.clientHeight, //实时屏幕高度
				hidshow: true //显示或者隐藏footer
			}
		},
		mounted() {
			// window.onresize监听页面高度的变化
			window.onresize = () => {
				return (() => {
					this.showHeight = document.body.clientHeight;
				})()
			}
		},
		watch: {
			showHeight: function() {
				if (this.docmHeight > this.showHeight) {
					this.hidshow = false
				} else {
					this.hidshow = true
				}
			}
		},
		computed: {
			verify: function() {
				if (!this.formInline.account) {
					return {
						"flag": false,
						"msg": '请输入账号！'
					};
				}
				if (!this.formInline.password) {
					return {
						"flag": false,
						"msg": '请输入密码！'
					};
				}
				return {
					"flag": true,
					"msg": 'success'
				};
			}
		},
		methods: {
			//跳转注册页面
			toRegister() {
				uni.redirectTo({
					url: "register",
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			
			//切换登录方式（密码、手机验证码）
			changeLoginMethod() {
				console.log(1)
				if (this.loginMethodText == "密码") {
					this.loginMethodText = "验证码";
					this.formInline = {};
					this.formItem.splice(1, 1, {
						type: 'input',
						inputType: 'password',
						label: '密码',
						placeholder: '请输入密码',
						clumn: 'password'
					});
				} else if (this.loginMethodText == "验证码") {
					this.loginMethodText = "密码";
					this.formInline = {};
					this.formItem.splice(1, 1, {
						type: 'input',
						inputType:'number',
						inputEnd: 'code',
						label: '验证码',
						placeholder: '请输入验证码',
						clumn: 'code'
					});
				}
			},
			
			//提交登录表单
			onSubmit() {
				if (!this.verify.flag) {
					uni.showToast({
						title: this.verify.msg,
						icon: 'none',
						duration: 2000
					});
					return;
				};
				uni.request({
					url: this.baseUrl + 'api/authLogin',
					method: 'post',
					data: {
						userName: this.formInline.account,
						password: this.formInline.password,
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success: function(res) {
						console.log(res.data);
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
						if (res.data.code == 0) {
							let token = res.data.data.token;
							uni.setStorage({
								key: 'token',
								data: res.data.data.token,
								success: function() {

								}
							});
							uni.setStorage({
								key: 'account',
								data: res.data.data.userName,
							});
							setTimeout(function() {
								uni.switchTab({
									url: '../home/index',
								})
							}, 2000);

						}
						console.log('request success');
					}
				});


			}

		}
	}
</script>

<style>
	.form-title {
		padding: 0 5%;
		color: rgb(136, 136, 136);
		line-height: 60rpx;
	}

	.app-img {
		display: flex;
		justify-content: center;
		padding: 80rpx 5%;
	}

	.app-img image {
		width: 120rpx;
		height: 120rpx;
	}

	.login-method {
		padding: 0 5% 0 5%;
		line-height: 80rpx;
		color: #6394ff;
	}

	.footer {
		position: fixed;
		bottom: 80rpx;
		width: 100%;
		text-align: center;
		padding: 0 5% 0 5%;
	}

	.footer span {
		color: #007AFF;
	}
</style>
